import React, { Component } from 'react'
import {Row,Col} from "antd"
import * as echarts from "echarts"
export default class UserFenxi extends Component {
    componentDidMount(){
        var chartDom = document.getElementById('eachartBoxOne');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['一栋', '二栋', '三栋', '四栋', '五栋', '六栋', '七栋'],
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                name:"住户人数/(户)",
                min:0,
                max:80,
            },
            series: [{
                data: [60, 40, 45, 70, 70, 66, 72],
                type: 'bar'
            }]
        };
        option && myChart.setOption(option);

        var chartDom = document.getElementById('eachartBoxTwo');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '面积模式',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        {value: 20, name: '0-18'},
                        {value: 28, name: '18-25'},
                        {value: 22, name: '25-45'},
                        {value: 18, name: '45-60'},
                        {value: 12, name: '60+'},
                    ]
                }
            ]
        };

        option && myChart.setOption(option);
    }
    render() {
        return (
            <div className="site-layout-background" style={{ padding: 24, minHeight: 760 }}>
                <h2 style={{margin:"20px"}}>社区用户分析</h2> 
                <Row style={{width:"100%"}}>
                    <Col span={11} offset={0}>
                        <div id="eachartBoxOne" style={{width:"100%",height:400,border:"1px solid #ddd"}}></div>
                    </Col>
                    <Col span={11} offset={1}>
                        <div id="eachartBoxTwo" style={{width:"100%",height:600,border:"1px solid #ddd"}}></div>
                    </Col>
                </Row>
            </div>
        )
    }
}
